function Page(el, options = {}){
    this.el=document.querySelector(el)
    this.options=options
    this.kaishi()
}
Page.prototype.kaishi=function(){
    this.dianjishijian()
    this.zaobiaoqian()
    this.fubiaoqian()
}
//绑定点击事件
Page.prototype.dianjishijian=function(){
    this.el.onclick=evt=>{
        let e=evt||window.event
        let target=e.target||e.srcElement
        if(target.nodeName==='P'){
            switch(target.innerText){
                case this.options.pageTag.first:
                    this.options.pageInfo.pageNum=1
                    break;
                case this.options.pageTag.prev:
                    if(this.options.pageInfo.pageNum==1)return
                    this.options.pageInfo.pageNum--
                    break;
                case this.options.pageTag.next:
                    if(this.options.pageInfo.pageNum==this.options.pageInfo.totalPage)return
                    this.options.pageInfo.pageNum++
                    break;
                case this.options.pageTag.last:
                    this.options.pageInfo.pageNum=this.options.pageInfo.totalPage
                    break;
                default:
                    if(parseInt(target.innerHTML)>0){
                        this.options.pageInfo.pageNum=parseInt(target.innerHTML)
                    }
                    break;
            }
            this.zaobiaoqian()
        }
    }
}
//父标签弹性盒
Page.prototype.fubiaoqian=function(){
    this.el.style.display='flex'
    this.el.style.justifyContent = 'center'
    this.el.style.alignItems = 'center'
}
//造p标签追加到div中
Page.prototype.zaobiaoqian=function(){
    this.el.innerHTML=''
    let pageTag = this.options.pageTag
    for(let key in this.options.pageTag){
        //传参
        this.quProngyu('p',pageTag[key],this.el)
    }
    //分页页码
    this.fenyeyema()
}
    //分页页码
Page.prototype.fenyeyema=function(){
    //去第三个p标签边框
    let box1=this.el.querySelector('p:nth-of-type(3)')
    box1.style.border='none'
    box1.style.margin='0px'
    box1.style.padding='0px'
    // for(let i=1;i<6;i++){
    //     //传参
    //     this.quProngyu('p',i,box1)
    // }
    let pageNum=this.options.pageInfo.pageNum
    this.options.pageInfo.totalPage=Math.ceil(this.options.pageInfo.totalData/this.options.pageInfo.pageSize)
    let totalPage=this.options.pageInfo.totalPage
    let pObjs = this.el.querySelectorAll("P")
    if (this.options.pageInfo.pageNum === 1){
       pObjs[0].style.cursor="not-allowed"
       pObjs[1].style.cursor="not-allowed"
    }
    if (this.options.pageInfo.pageNum ===  this.options.pageInfo.totalPage){
       pObjs[3].style.cursor="not-allowed"
       pObjs[4].style.cursor="not-allowed"
    }

    if(totalPage<7){
        for(let i=1;i<=totalPage;i++)this.quProngyu('p',i,box1)
    }else if(pageNum<5){
        for(let i=1;i<=5;i++)this.quProngyu('p',i,box1)
        this.quProngyu('p','...',box1)
        this.quProngyu('p',totalPage-1,box1)
        this.quProngyu('p',totalPage,box1)
    }else if(pageNum==5){
        for(let i=1;i<=7;i++)this.quProngyu('p',i,box1)
        this.quProngyu('p','...',box1)
        this.quProngyu('p',totalPage-1,box1)
        this.quProngyu('p',totalPage,box1)
    }else if(pageNum>5&&pageNum<totalPage-4){
        for(let i=1;i<=2;i++)this.quProngyu('p',i,box1)
        this.quProngyu('p','...',box1)
        this.quProngyu('p',pageNum-2,box1)
        this.quProngyu('p',pageNum-1,box1)
        this.quProngyu('p',pageNum,box1)
        this.quProngyu('p',pageNum+1,box1)
        this.quProngyu('p',pageNum+2,box1)
        this.quProngyu('p','...',box1)
        this.quProngyu('p',totalPage-1,box1)
        this.quProngyu('p',totalPage,box1)
    }else if(pageNum>=totalPage-4){
        for(let i=1;i<=2;i++)this.quProngyu('p',i,box1)
        
        this.quProngyu('p','...',box1)
        for(let i=totalPage-4;i<=totalPage;i++)this.quProngyu('p',i,box1)
    }
}
//去p代码冗余
Page.prototype.quProngyu=function(biaoqian,bianliang,fuys){
        //造p标签追加到div中
        let pobj=document.createElement(biaoqian)
        pobj.innerText=bianliang
        pobj.style.border='1px solid black'
        pobj.style.margin='0 5px'
        pobj.style.padding='0 5px'
        pobj.style.display='inline-block'
        //选中
        if(bianliang==this.options.pageInfo.pageNum)pobj.style.background='orange'
        fuys.appendChild(pobj)
}